<template>
	<div>
		<div>
			<el-form ref="allotForm" :model="allotInfo" :rules="rules" label-position="left" label-width="80px">
				<el-form-item label="基地" prop="bid">
					<el-select v-model="allotInfo.bid" placeholder="请选择基地" filterable style="width: 280px;">
						<el-option
						      v-for="item in bases"
						      :key="item.id"
						      :label="item.name"
						      :value="item.id">
						    </el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="指导教师" >
					<!-- <h1>选择要设置的指导教师：</h1> -->
					<el-transfer 
					    :titles="['教师', '选择指导教师']"
						:props="{key: 'id',label: 'name'}"
					    v-model="teacherValues" 
					    :data="teacherDatas">
					</el-transfer>
				</el-form-item>
				<div style="display: flex;justify-content: flex-start">
					<el-form-item label="专业">
						<el-select v-model="allotInfo.mid" placeholder="请选择专业" @change="majorChange">
							<el-option
							      v-for="item in majors"
							      :key="item.id"
							      :label="item.name"
							      :value="item.id">
							    </el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="班级" style="margin-left: 40px;" label-width="55px">
						<el-select v-model="allotInfo.cid" placeholder="请选择班级" @change="classChange">
							<el-option
							      v-for="item in classes"
							      :key="item.id"
							      :label="item.name"
							      :value="item.id">
							    </el-option>
						</el-select>
					</el-form-item>
				</div>
				<el-form-item label="实习学生" >
					<el-transfer
					    :titles="['学生', '选择实习学生']"
						:props="{key: 'id',label: 'name'}"
					    v-model="studentValues" 
					    :data="studentDatas">
					</el-transfer>
				</el-form-item>
				
			</el-form>
		</div>
		<div style="margin-left: 320px;margin-top: 30px;margin-bottom: 100px;">
			<el-button type="primary" @click="clearAll" style="margin-right: 20px;">重置</el-button>
			<el-button type="primary" @click="submit">提交</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				allotInfo: {},
				bases:[],
				majors:[],
				mid: 0,
				classes: [],
				cid: [],
				teacherValues: [],
				teacherDatas: [],
				studentValues: [],
				studentDatas: [],
				rules:{
				    bid: [{required: true, message: '请选择基地',trigger: 'blur'}],
				},
			}
		},
		mounted() {
			this.initBases();
			this.initTeachers();
			this.initMajors();
		},
		methods: {
			initBases() {
				this.getRequest('/practice/allot/base').then(resp => {
					if(resp) {
						this.bases = resp;
					}
				})
			},
			initTeachers() {
				this.getRequest('/practice/allot/teachers').then(resp => {
					if(resp) {
						this.teacherDatas = resp;
					}
				})
			},
			initMajors() { 
				this.getRequest('/practice/allot/majors').then(resp => {
					if(resp) {
						this.majors = resp;
					}
				})
			},
			initClasses() {
				this.getRequest('/practice/allot/classes/' + this.mid).then(resp => {
					if(resp) {
						this.classes = resp;
					}
				})
			},
			initStudents() {
				this.getRequest('/practice/allot/students/' + this.cid).then(resp => {
					if(resp) {
						this.studentDatas = resp;
					}
				})
			},
			majorChange(val) {
				this.mid = val;
				this.initClasses();
			},
			classChange(val) {
				this.cid = val;
				this.initStudents();
			},
			clearAll() {
				this.allotInfo = {};
				this.teacherDatas = [];
				this.teacherValues = [];
				this.studentDatas = [];
				this.studentValues = [];
			},
			submit() {
				this.$refs['allotForm'].validate(valid => {
					if (valid) {
						this.$confirm('此操作将提交分配信息, 是否继续?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							let url = '/practice/allot/add?bid=' + this.allotInfo.bid;
							this.teacherValues.forEach(key => {
								url += '&tids=' + key;
							});
							this.studentValues.forEach(key => {
								url += '&sids=' + key;
							})
							this.postRequest(url).then(resp => {
								if (resp) {
									this.clearAll();
								}
							})
						}).catch(() => {
							this.$message({
								type: 'info',
								message: '已取消提交'
							});
						});
					}
				})
			},
		}
	}
</script>

<style>
	.el-transfer-panel{
		width: 250px;
	}
	/* .el-transfer-panel__list.is-filterable{
	    width: 250px;
	    height: 400px;
	} */
</style>
